<template>
  <div>
    <el-container>
      <el-header class="titleBar">
        产品管理
      </el-header>

      <el-main class="mainContent">
        <el-card style="margin-bottom:5px">
          <!-- input框输入列 -->
          <el-row :gutter="10">
            <el-col :span="9">
              <!-- 产品名称 -->
              <div class="input_title_box">
                <b class="input_title"> 产品名称</b>
                <el-input
                  v-model="text"
                  placeholder="请输入"
                  clearable
                  style="width:200px"
                ></el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="input_title_box">
                <b class="input_title">产品分类</b>
                <el-select v-model="type" placeholder="请选择分类">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          <!-- 按钮操作列表 -->
          <el-row :gutter="10" class="btnControl">
            <el-col :span="18"><div class="box_title"></div></el-col>
            <el-col :span="5">
              <!-- <div class="box_test" style="background:yellow;min-height:36px;"></div> -->
              <el-row :gutter="10">
                <el-col :span="8"
                  ><el-button size="mini" @click="empty"
                    >重置</el-button
                  ></el-col
                >
                <el-col :span="8">
                  <el-button type="primary" size="mini" @click="search"
                    >查询</el-button
                  ></el-col
                >
                <el-col :span="6">
                  <el-button
                    type="success"
                    size="mini"
                    @click="addDialogVisible = true"
                    ><i
                      class="el-icon-circle-plus-outline"
                      @click="addDialogVisible = true"
                    ></i>
                    添加</el-button
                  ></el-col
                >
              </el-row>
            </el-col>
          </el-row>
        </el-card>

        <el-card>
          <!-- 表单数据 -->
          <el-table
            :data="productlist"
            border
            style="width: 100%"
            :header-cell-style="{
              textAlign: 'center',
              background: '#ededed',
              color: '#333',
              fontWeight: '500',
            }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column label="产品编号" prop="id"></el-table-column>
            <el-table-column label="产品图片" prop="img1">
              <!-- 插槽 slot-scope scope.row.image -->
              <template slot-scope="scope">
                <el-image
                  :src="scope.row.img1"
                  style="width:40px;height:40px"
                  fit="cover"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" prop="name"></el-table-column>
            <el-table-column label="产品分类" prop="type"></el-table-column>
            <el-table-column
              label="产品介绍"
              prop="introduce"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-row :gutter="20" class="opBtn">
                  <el-col :span="10" class="etBtn">
                    <el-button
                      type="text"
                      size="small"
                      @click="showEditDialog(scope.row)"
                      >编辑</el-button
                    >
                  </el-col>
                  <el-col :span="10">
                    <el-button
                      type="text"
                      size="small"
                      class="deleteBtn"
                      @click="removeId(scope.row)"
                      >删除</el-button
                    >
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.pagenum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="pagination.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          >
          </el-pagination>
        </el-card>
      </el-main>
    </el-container>

    <!-- 添加对话框 -->
    <el-dialog
      title="添加产品"
      :visible.sync="addDialogVisible"
      width="70%"
      @close="addDialogClosed">
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
        class="demo-ruleForm">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="file">
              <p>图片：</p>
              <el-upload
                class="avatar-uploader"
                ref="upload"
                action="#"
                :data="addForm"
                :show-file-list="false"
                :multiple="false"
                :auto-upload="false"
                :on-change="imgSaveToUrl"
              >
                <img
                  v-if="this.addForm.img1"
                  :src="this.addForm.img1"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item prop="name">
              <p>产品名称：</p>
              <el-input
                v-model="addForm.name"
                type="text"
                style="width:240px"
              ></el-input>
            </el-form-item>
            <el-form-item prop="type">
              <p>产品分类:</p>
              <el-select v-model="addForm.type" placeholder="请选择分类">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="introduce">
              <p>产品介绍：</p>
              <el-input
                v-model="addForm.introduce"
                style="width:240px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAction">确 定</el-button>
      </span>
    </el-dialog>

    <!--  -->
    <!-- 编辑轮播图 -->
    <el-dialog
      title="编辑产品"
      :visible.sync="editDialogVisible"
      width="70%"
      @close="editDialogClosed"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="70px"
        @close="editDialogClosed"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item>
              <p>编辑图片:</p>
              <el-upload
                class="avatar-uploader"
                ref="upload"
                action="#"
                :data="addForm"
                :show-file-list="false"
                :multiple="false"
                :auto-upload="false"
                :on-change="imgSaveToUrl1"
              >
                <img
                  v-if="this.editForm.img1"
                  :src="this.editForm.img1"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item prop="name">
              <p>产品名称：</p>
              <el-input
                v-model="editForm.name"
                type="text"
                style="width:240px"
              ></el-input>
            </el-form-item>
            <el-form-item prop="type">
              <p>产品分类:</p>
              <el-select v-model="editForm.type" placeholder="请选择分类">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="introduce">
              <p>产品介绍：</p>
              <el-input
                v-model="editForm.introduce"
                style="width:240px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editChartInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // select死数据
      form: {
        list: "",
      },
      value: "",
      options: [],
      // 后台展示参数
      productInfo: {
        total: 5,
        roleList: "",
      },
      pagination: {
        pagenum: 1,
        pagesize: 5,
        total: 5,
      },
      productlist: [],
      //添加对话框的显示与隐藏
      addDialogVisible: false,
      addForm: {
        name: "",
        img1: "",
        img2: "",
        img3: "",
        introduce: "",
        type: "",
      },
      file: "",
      // 添加表单的校验
      addFormRules: {
        id: [{ required: true, message: "请输入数值", trigger: "blur" }],
        name: [{ required: true, message: "请输入行为名称", trigger: "blur" }],
      },
      // 控制修改对话框的显示与隐藏
      editDialogVisible: false,
      // 查询用户信息对象
      editForm: {
        name: "",
        img1: "",
        img2: "",
        img3: "",
        introduce: "",
        type: "",
      },
      // 修改表单的校验规则对象
      editFormRules: {
        image: [{ required: true, message: "请输入数值", trigger: "blur" }],
      },
      text: "",
      type: "",
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    // 后台展示数据
    async getProductList() {
      const res = await this.http.get("/product/select", this.pagination);
      this.productlist = res.roleList;
      this.pagination.total = res.total;
      console.log(res);
    },
    // 监听分页pagesize和pagenum改变
    handleSizeChange(newSize) {
      this.pagination.pagesize = newSize;
      this.getProductList();
    },
    handleCurrentChange(newPage) {
      this.pagination.pagenum = newPage;
      this.getProductList();
    },
    //删除
    async removeId(row) {
      console.log(row);
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      );
      // .catch((error) => error);
      console.log(confirmResult);
      if (confirmResult !== "confirm") {
        return this.$message({ message: "已取消删除", type: "warning" });
      }

      const res = await this.http.post("/product/delete", row.id);
      console.log(res);
      this.getProductList();
    },
    // 添加
    // 监听增添行为对话框的关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    addAction() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        // 发起添加网络请求
        const { res } = await this.http.post("/product/add", this.addForm);
        console.log(res);

        if (status.code !== 200) {
          this.$message({ message: "添加产品失败", type: "warning" });
        }
        this.addDialogVisible = false;
        this.getProductList();
        this.$message({ message: "添加产品成功", type: "success" });
      });
    },
    //图片上传
    async imgSaveToUrl(event) {
      if (this.beforeUploadPicture(event.raw)) {
        var formData = new FormData();
        console.log(formData);
        formData.append("file", event.raw);
        this.http.upload("/product/upload", formData).then((res) => {
          if (res.code == 200) {
            this.addForm.img1 = res.data;
            this.addForm.img2 = this.addForm.img1;
            this.addForm.img3 = this.addForm.img1;
            console.log(res.data);
            console.log(this.addForm);
            this.$message.success("上传成功");
          }
        });
      }
    },
    async imgSaveToUrl1(event) {
      if (this.beforeUploadPicture(event.raw)) {
        var formData = new FormData();
        console.log(formData);
        formData.append("file", event.raw);
        this.http.upload("/product/upload", formData).then((res) => {
          if (res.code == 200) {
            this.editForm.img1 = res.data;
            this.editForm.img2 = this.editForm.img1;
            this.editForm.img3 = this.editForm.img1;
            console.log(res.data);
            console.log(this.addForm);
            this.$message.success("上传成功");
          }
        });
      }
    },
    // 图片上传之前
    beforeUploadPicture(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG 或者 PNG 格式!");
      }
      if (isJPG && isPNG) {
        if (!isLt10M) {
          this.$message.error("上传头像图片大小不能超过 10MB!");
        }
      }

      return (isJPG || isPNG) && isLt10M;
    },
    // 编辑
    async showEditDialog(row) {
      this.editForm = row;
      const res = await this.http.post("/product/update", row);

      this.editDialogVisible = true;
      console.log(row);
      console.log(res);
    },
    // 监听修改对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    // 修改用户信息并提交
    editChartInfo() {
      this.$refs.editFormRef.validate(async (valid) => {
        // console.log(valid);
        if (!valid) return;
        // 发起请求获取
        const res = await this.http.post("/product/update", this.editForm, {
          title: this.editForm.title,
          // image:this.addForm.image
          img1: this.editForm.img1,
          img2: this.editForm.img1,
          img3: this.editForm.img1,
        });

        if (status.code !== 200) {
          this.$message({ message: "更新轮播图失败！", type: "warning" });
        }
        // 关闭对话框
        this.editDialogVisible = false;
        // 刷新数据
        this.getProductList();
        // 提示修改成功
        this.$message.success({ message: "更新轮播图成功!", type: "success" });
        console.log(res);
      });
    },
    // 搜索
    async search() {
      const res = await this.http.get("/product/selectVogue", {
        name: this.text,
        pagenum: this.pagination.pagenum,
        pagesize: this.pagination.pagesize,
        type: this.type,
      });
      console.log(res);
      if (res.total == 0) {
        //  this.productlist = ''
      }
      this.productlist = res.list;
      this.pagination.total = res.total;
    },
    async getselectProduct() {
      const res = await this.http.get("/type/selectProduct");
      this.options = res.list;
      console.log(res);
    },
    //重置
    empty() {
      (this.text = ""), (this.type = "");
    },
  },
  created() {
    this.getProductList();
    this.getselectProduct();
  },
};
</script>

<style scoped>
.header_title {
  font-size: 22px;
  margin-bottom: 0px;
  font-weight: 400;
  color: #999999;
}
.bgk {
  background: pink;
}

.avatar-uploader-icon {
  /* border: 2px dashed #dedede; */
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}
</style>
